import React, { useState } from "react";
import { Badge, TabBar } from "antd-mobile";
import { useNavigate, useLocation, useSelector } from "umi";
import Icon from "../icon";
import "./style.scss";

export default function index() {
  const navigate = useNavigate();
  const tabs = [
    {
      key: "/home",
      title: (active: boolean) => {
        return active ? (
          <span style={{ color: "#fc5a5a" }}>首页</span>
        ) : (
          <span style={{ color: "#c1b6b6" }}>首页</span>
        );
      },
      icon: (active: boolean) =>
        active ? (
          <Icon name="shouye" size={22} color="#fc5a5a" />
        ) : (
          <Icon name="shouye" size={22} color="#c1b6b6" />
        ),
    },
    {
      key: "/cate",
      title: (active: boolean) => {
        return active ? (
          <span style={{ color: "#fc5a5a" }}>点赞</span>
        ) : (
          <span style={{ color: "#c1b6b6" }}>点赞</span>
        );
      },
      icon: (active: boolean) =>
        active ? (
          <Icon name="dianzan" size={22} color="#fc5a5a" />
        ) : (
          <Icon name="dianzan" size={22} color="#c1b6b6" />
        ),
    },
    {
      key: "/cart",
      title: (active: boolean) => {
        return active ? (
          <span style={{ color: "#fc5a5a" }}>购物车</span>
        ) : (
          <span style={{ color: "#c1b6b6" }}>购物车</span>
        );
      },
      icon: (active: boolean) =>
        active ? (
          <Icon name="gouwuche" size={22} color="#fc5a5a" />
        ) : (
          <Icon name="gouwuche" size={22} color="#c1b6b6" />
        ),
      badge: (
        <Badge
          content={useSelector((state: any) => state.cart.cartNumbers)}
        ></Badge>
      ),
    },
    {
      key: "/collect",
      title: (active: boolean) => {
        return active ? (
          <span style={{ color: "#fc5a5a" }}>收藏</span>
        ) : (
          <span style={{ color: "#c1b6b6" }}>收藏</span>
        );
      },
      icon: (active: boolean) =>
        active ? (
          <Icon name="shoucang" size={22} color="#fc5a5a" />
        ) : (
          <Icon name="shoucang" size={22} color="#c1b6b6" />
        ),
    },
    {
      key: "/user",
      title: (active: boolean) => {
        return active ? (
          <span style={{ color: "#fc5a5a" }}>我的</span>
        ) : (
          <span style={{ color: "#c1b6b6" }}>我的</span>
        );
      },
      icon: (active: boolean) =>
        active ? (
          <Icon name="wode" size={22} color="#fc5a5a" />
        ) : (
          <Icon name="wode" size={22} color="#c1b6b6" />
        ),
    },
  ];

  return (
    <div className="tabBar">
      <TabBar
        activeKey={useLocation().pathname}
        onChange={(key: string) => {
          navigate(key);
        }}
      >
        {tabs.map((item, index) => (
          <TabBar.Item
            key={item.key}
            icon={item.icon}
            title={item.title}
            badge={item.badge}
          />
        ))}
      </TabBar>
    </div>
  );
}
